<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
    />
    <style>
      .green {
        color: green;
      }

      .red {
        color: red;
      }

      .yellow {
        color: yellow;
      }

      .active {
        font-size: 30px;
      }

      .mobileBack {
        display: none;
      }

      @media (max-width: 600px) {
        .mobileBack {
          display: block;
        }
      }
    </style>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script src="/node_modules/@luigi-project/client/luigi-client.js"></script>
    <script>
      let myUserSettings = {};

      window.LuigiClient.addInitListener((context, origin) => {
        renderData(context);
      });

      window.LuigiClient.addContextUpdateListener((context, origin) => {
        renderData(context);
      });

      function renderData(context) {
        myUserSettings = context.userSettingsData;
        if (myUserSettings && myUserSettings.theme) {
          let button = document.querySelector('.' + myUserSettings.theme);
          button.classList.add('active');
        }
      }

      function changeTheming(theme) {
        document.querySelectorAll('.btnList button').forEach(button => {
          button.classList.remove('active');
        });
        document.querySelector('.' + theme).classList.add('active');
        myUserSettings.theme = theme;
        window.LuigiClient.sendCustomMessage({
          id: 'luigi.updateUserSettings',
          data: myUserSettings
        });
      }

      function setYellowTheme(theme) {
        window.LuigiClient.sendCustomMessage({
          id: 'my-custom-message.update-user-settings',
          theme: 'yellow'
        });
      }

      function goBackToModalMf() {
        LuigiClient.linkManager().openAsModal('/home/modalMf');
      }
    </script>
    <div>
      <ul class="btnList">
        <li>
          <button class="red" onclick="changeTheming('red')">
            Red
          </button>
        </li>
        <br /><br />
        <li>
          <button class="green" onclick="changeTheming('green')">
            Green
          </button>
        </li>
        <br /><br />
        <li>
          <button class="yellow" onclick="setYellowTheme('yellow')">
            Yellow
          </button>
        </li>
        <br /><br />
      </ul>
    </div>
    <button id="backToModalMf" onclick="goBackToModalMf()">go back to modalMf</button>
  </body>
</html>
